/*首先自己建立一个数组（下面的'tree'就是），然后让树生成插件引用这个原始数组，插件就会根据这个原始数组
* 生成一个新的数组（中间数组），并向这个中间数组中添加一些属性以调用插件的各种功能，然后在通过这个中间数组在页面上生成可见的树
* 增删改功能是我自行定义的，原理都是改变原始数组，然后再传给插件来生成可见的树*/

//通过不同的层级加入不同的小图标
function selectIcon(level) {
    var icon;
    if(level==0){icon='fa fa-map'}
    if(level==1){icon='fa fa-plane'}
    if(level==2){icon='fa fa-road'}
    if(level>2){icon='fa fa-angellist'}
    return icon;
}
//此变量为了实现：添加子节点时，可以选中加上的节点
var childNodeCount=0;
//添加操作 注意 添加必须在右键菜单的上面绑定事件
var node;
//定义了一个量 储存自定义的节点名称
var newName="未命名";
//定义原始数组，其下的每一个“子对象”是树的父节点
//原始数组对象的有一些属性是插件要用的，另外也可以自己定一些额外的属性

var tree = [
    {	id:2 ,
        icon: 'fa fa-map',
        text: "基地"
    },
    {	id:1,
        icon: 'fa fa-map',
        text: "华北"
    },
    {
        icon: 'fa fa-map',
        text: "华东"
    },
    {
        icon: 'fa fa-map',
        text: "中南"
    },
    {
        icon: 'fa fa-map',
        text: "西南"
    },
    {
        icon: 'fa fa-map',
        text: "西北"
    },
    {
        icon: 'fa fa-map',
        text: "东北"
    },
    {
        icon: 'fa fa-map',
        text: "新疆"
    }   
];

function buildTreeData(treeData){
	tree = treeData;
}
//下面的buildTree_2是利用数组tree在页面上生成树的函数，每次增删改的操作都会重新调用一次
//selectedNode为传入参数为被选择的节点ID数值；newNodeText为新节点的名称 ;type操作类型
function buildTree_2(selectedNode,newNodeText,type) {
    //如果是添加节点或者添加子节点或者是重命名且新节点未定义，判定为操作失败，返回未更改的原树
    if((!newNodeText)&&((type=="nodeAddChild")||type=="nodeAdd"||type=="nodeRename")){return tree;}
    //添加子节点功能定义
    if(type=="nodeAddChild"){
        //定义递归遍历下一级的数组
        var count=0;
        function nextLevelAdd(parentNode) {
            for(var i=0;i<parentNode.length;i++){
                //统计节点个数
                count++;
                //发现符合的nodeID,在数组中插入,插入完毕退出函数 没有下一级子节点，初始化一个
                if(selectedNode==(count-1)){
                    if(!parentNode[i].nodes){
                        parentNode[i].nodes=[];
                    }
                    //选择合适的图标
                    //通过查找选中li元素包含几个indent,来确定节点层级
                    var indentNums=$(node).find("span[class=indent]").length;
                    //因为是添加子节点 所以层级要加1才能得到下一级的图标
                    var icon=selectIcon(indentNums+1);
                    //生成新节点
                    var newNode={text: newNodeText,icon:icon};
                    //新节点加入到数组中，并返回子节点的数目
                    childNodeCount=parentNode[i].nodes.push(newNode);
                    return tree;
                }
                if(parentNode[i].nodes){

                    nextLevelAdd(parentNode[i].nodes)
                }
            }
        }
        //调用遍历函数
        nextLevelAdd(tree);

    }
    //重命名函数功能定义
    if(type=="nodeRename"){
        //定义递归遍历下一级的函数
        var count=0;
        function nextLevelRemove(parentNode) {
            for(var i=0;i<parentNode.length;i++){
                //统计节点个数
                count++;
                //发现符合的nodeID,修text，改完退出函数
                if(selectedNode==(count-1)){
                    parentNode[i].text=newNodeText;
                    return tree;
                }
                if(parentNode[i].nodes){
                    nextLevelRemove(parentNode[i].nodes)
                }
            }
        }
        //调用遍历函数
        nextLevelRemove(tree);
        //统计节点个数

    }
    //删除功能定义如下
    if(type=="nodeRemove"){
        //定义递归遍历下一级的函数
        var count=0;
        function nextLevelRemove(parentNode) {
            for(var i=0;i<parentNode.length;i++){
                //统计节点个数
                count++;
                //发现符合的nodeID,删除,删除完毕退出函数
                if(selectedNode==(count-1)){
                    parentNode.splice(i,1);
                    return tree;
                }
                if(parentNode[i].nodes){
                    nextLevelRemove(parentNode[i].nodes)
                }
            }
        }
        //调用遍历函数
        nextLevelRemove(tree);
        //统计节点个数

    }
    //添加同辈节点功能定义如下
    if(type=="nodeAdd"){
        //定义递归遍历下一级的函数
        var count=0;
        function nextLevelAdd(parentNode) {
            for(var i=0;i<parentNode.length;i++){

                //统计节点个数
                count++;
                //发现符合的nodeID,在数组中插入
                if(selectedNode==(count-1)){
                    //选择合适的图标
                    //通过查找选中li元素包含几个indent,来确定节点层级
                    var indentNums=$(node).find("span[class=indent]").length;

                    //因为是添加子节点 所以层级要加1才能得到下一级的图标
                    var icon=selectIcon(indentNums);
                    //生成新节点
                    var newNode={text: newNodeText,icon:icon};
                    //新节点加入到数组中
                    //子节点数目清零，如果存在子节点，统计一下数目
                    childNodeCount=0;
                    if (parentNode[i].nodes){
                        childNodeCount=parentNode[i].nodes.length;
                    }
                    parentNode.splice(i+1,0,newNode);
                }

                if(parentNode[i].nodes){
                    nextLevelAdd(parentNode[i].nodes)
                }
            }
        }
        //调用遍历函数
        nextLevelAdd(tree);

    }
    //alert(tree[5].nodeId);
    return tree;
}
/*给选定的节点绑定要执行的代码 getnode是被选中的节点 但这个节点所在的数组并不是原始的那个tree数组,而是插件自动生成的一个数组，加入了一些插件的事件和方法
nodeId是中间数组里每个节点的ID标识符,从0开始*/
function selectedDo(event, getnode) {
    $("#treeview_2_output").prepend('<p>' + getnode.text + ' was selected. &nbsp;&nbsp;&nbsp;&nbsp;'+'nodeId='+ getnode.nodeId + '</p>');
}

//DOM载入完成执行下面代码
$(function() {
//生成树
    var options_2 = {
        bootstrap2: false,
        showTags: false,
        levels: 3,
        data: buildTree_2(),
        onNodeSelected:selectedDo,
    };
        $('#treeview_2').treeview(options_2);

//给右键菜单绑定添加操作
    $("ul#dropdown-yincang .add").on("mousedown",function (event) {
        //modal的确定上绑定添加操作
        $("button#btn_NameForm").off().on("mousedown",function (event) {
            newName=$("#newname").val();
            var nodeId=$(node).attr("data-nodeid");
            //重新生成树
            var newOptions = {
                bootstrap2: false,
                showTags: false,
                levels: 3,
                //传入选中的节点ID参数
                data: buildTree_2(nodeId,newName,"nodeAdd"),
                onNodeSelected:selectedDo
            };
            //生成树
            $('#treeview_2').treeview(newOptions);
            //如果生成有效，选中新节点
            if(newName){
                $('#treeview_2').treeview('selectNode', [ parseInt(nodeId)+parseInt(childNodeCount)+1, { silent: false } ]);
            }
        });
        //调出modal
        $('#inputModal').modal('show');
    });

//给右键菜单绑定删除操作
    $("ul#dropdown-yincang .remove").on("mousedown",function (event) {
        var nodeId=$(node).attr("data-nodeid");
        //重新生成树
        var newOptions = {
            bootstrap2: false,
            showTags: false,
            levels: 3,
            //传入选中的节点ID参数
            data: buildTree_2(nodeId,newName,"nodeRemove"),
            onNodeSelected:selectedDo
        };
        $('#treeview_2').treeview(newOptions);
    });

//给右键菜单绑定重命名操作
    $("ul#dropdown-yincang .rename").on("mousedown",function (event) {
        //modal的确定上绑定添加操作
        $("button#btn_NameForm").off().on("mousedown",function (event) {
            newName=$("#newname").val();
            var nodeId=$(node).attr("data-nodeid");
            //重新生成树
            var newOptions = {
                bootstrap2: false,
                showTags: false,
                levels: 3,
                //传入选中的节点ID参数
                data: buildTree_2(nodeId,newName,"nodeRename"),
                onNodeSelected:selectedDo
            };
            $('#treeview_2').treeview(newOptions);
        });
        //调出模态框
        $('#inputModal').modal('show');
    });

//给右键菜单绑定添加子节点操作
    $("ul#dropdown-yincang .addchild").on("mousedown",function (event) {
        //modal的确定上绑定添加操作
        $("button#btn_NameForm").off().on("mousedown",function (event) {

            newName=$("#newname").val();
            var nodeId=$(node).attr("data-nodeid");
            //重新生成树
            var newOptions = {
                bootstrap2: false,
                showTags: false,
                levels: 3,
                //传入选中的节点ID参数
                data: buildTree_2(nodeId,newName,"nodeAddChild"),
                onNodeSelected:selectedDo
            };
            //生成的节点会被选中
            $('#treeview_2').treeview(newOptions)
            .treeview('selectNode', [ parseInt(nodeId)+parseInt(childNodeCount), { silent: false } ]);
        });
        //调出模态框
        $('#inputModal').modal('show');
    });


//在树上点击右键弹出菜单
//注册上下文（右键）菜单事件
$("#treeview_2").on("contextmenu",function(event){
    //获取当前右键变为hover的节点
    node=event.target;
    //选中当前节点
    var nodeId=$(node).attr("data-nodeid");
    //silent设置为true 不会触发插件的onselectNode事件
    $('#treeview_2').treeview('selectNode', [ parseInt(nodeId), { silent: true } ]);
    var pageX = event.pageX;//鼠标单击的x坐标
    var pageY = event.pageY;//鼠标单击的y坐标
    //获取菜单并设置菜单的位置
    $("#dropdown-yincang").css({
        left:pageX+"px",//设置菜单离页面左边距离，left等效于x坐标
        top:pageY+"px"//设置菜单离页面上边距离，top等效于y坐标
    }).show();//显示使用淡入效果,比如不需要动画可以使用show()替换;
    event.preventDefault();//阻止浏览器与事件相关的默认行为；此处就是弹出右键菜单*/
    //获取菜单
    var $contextMenu = $("#dropdown-yincang");
    var cssObj = {
        top:pageY+"px",//设置菜单离页面上边距离，top等效于y坐标
        left:pageX+"px"//设置菜单离页面左边距离，left等效于x坐标
    };
    //判断横竖位置（pageX）+自定义菜单宽度之和，如果超过页面宽度及为溢出，需要特殊处理；
    var menuWidth = $contextMenu.width();
    var menuHeight= $contextMenu.height();
    var pageWidth = $(document).width();
    var pageHeight = $(document).height();
    if(pageX+menuWidth>pageWidth){
        cssObj.left = pageX-60+"px"; //防止溢出
    }
    if(pageY+menuHeight>pageHeight){
        cssObj.top = pageY-60+"px"; //
    }
    //设置菜单的位置
    $contextMenu.css(cssObj).show();//显示使用淡入效果,比如不需要动画可以使用show()替换;
    event.preventDefault();//阻止浏览器与事件相关的默认行为；此处就是弹出右键菜单
});
//右键菜单隐藏
$(document).on("mousedown",function(event){
    //button等于0代表左键，button等于1代表中键
    if(event.button==0 || event.button==1){
        $("#dropdown-yincang").hide();//获取菜单停止动画，进行隐藏使用淡出效果,未使用动画
    }
});


});











